<template>
  <div>
    <el-autocomplete v-bind="$attrs" v-model="value" ref="suggestion" clearable placeholder="请输入" suffix-icon="el-icon-search"
                     :trigger-on-focus="false" :fetch-suggestions="getSuggestion"
                     @focus="focus" @blur="blur" @clear="clear"
                     popper-class="ad-suggestion" :popper-append-to-body="false">
      <template slot-scope="{item}">
        <div class="item">
<!--          <div>{{item.linkmanPhone}}</div><div>{{item.linkmanName}}</div><div>{{item.companyName}}</div>-->
          <div style="display: none">
            <div ref="suggestionTable" class="ad-suggestion-table">
              <el-table :data="suggestionList" @row-click="select" header-cell-class-name="ad-suggestion-th" cell-class-name="ad-suggestion-td" border height="225" ref="table">
                <el-table-column v-for="(col, index) in $attrs.options" :key="index" :label="col.label" :prop="col.prop" show-overflow-tooltip/>
<!--                <el-table-column label="委托联系电话" prop="linkmanPhone" show-overflow-tooltip/>-->
<!--                <el-table-column label="委托联系人" prop="linkmanName" show-overflow-tooltip/>-->
<!--                <el-table-column label="公司名称" prop="companyName" show-overflow-tooltip/>-->
              </el-table>
            </div>
          </div>
        </div>
      </template>
    </el-autocomplete>

  </div>
</template>

<script>

export default {
  data() {
    return {
      value: '',
      suggestionList: [],
      suggestionListEl: null
    }
  },
  watch: {
    '$attrs.value': {
      immediate: true,
      handler(v) {
        this.value = v
        this.change(v)
      }
    }
  },
  methods: {
    focus(e) {
      const path = e.path || e.composedPath()
      this.findSuggestionTable(path[3])
    },
    blur() {
      if (!this.$attrs.hasOwnProperty('reserveInput')) {
        this.value = this.$attrs.value
      }else {
        this.$emit('input', this.value)
      }
    },
    clear() {
      this.$emit('clear', this.value)
      this.value = ''
    },
    findSuggestionTable(e) {
      this.suggestionListEl = e.querySelector('.el-autocomplete-suggestion__wrap')
    },
    select(row) {
      this.$refs.suggestion.activated =  false
      this.value = row[this.$attrs.defaultProp]
      this.$emit('input', row[this.$attrs.defaultProp])
      this.$emit('select', row)
    },
    change(value) {
      this.$emit('change', value)
    },
    getSuggestion(name, cb) {
      const startQueryCount = this.$attrs.api.startQueryCount || 0
      if (name.length >= startQueryCount) {
        this.$attrs.api.method({[this.$attrs.api.query]: name}).then(res => {
          const list = res.data
          // list.unshift({linkmanPhone: '委托联系电话', linkmanName: '委托联系人', companyName: '公司名称'})
          cb(list)
          if (list.length > 0) {
            this.suggestionList = list
            const wrap = this.suggestionListEl
            const ul = wrap.querySelector('.el-autocomplete-suggestion__list')
            // const li = ul.querySelector('li')
            if (ul) {
              wrap.removeChild(ul)
            } else {
              const table = wrap.querySelector('.ad-suggestion-table')
              wrap.removeChild(table)
            }
            this.$nextTick(() => {
              wrap.append(this.$refs.suggestionTable)
              this.$refs.table.doLayout()
            })
          }
        })
      } else {
        cb([])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ad-suggestion { width: 500px !important; padding: 0 10px;
  .el-scrollbar__wrap { overflow: hidden; }
  .ad-suggestion-th, .ad-suggestion-td { padding: 2px 0; line-height: 1; font-size: 12px; font-weight: normal; }
  .ad-suggestion-th { background: #f5f5f5; }
  //.el-autocomplete-suggestion__list li:first-child .item { border-top: 1px solid; }
  //.item { display: flex; border-bottom: 1px solid;
  //  div:first-child { width: 100px; border-right: 1px solid; border-left: 1px solid; }
  //  div:nth-child(2) { width: 100px; border-right: 1px solid; }
  //  div:last-child { flex: 1; border-right: 1px solid; }
  //}
}
</style>